<template>
  <div class="detail">
    <!-- 头部轮播 -->
    <div class="header">
      <van-button class="btn" @click="back">
        <van-icon name="arrow-left"/>
      </van-button>
    <van-swipe :autoplay="3000">
      <van-swipe-item
        v-for="image in images"
        :key="image.id"
      >
        <img v-lazy="image.url" />
      </van-swipe-item>
    </van-swipe>
    </div>

    <!-- 标题 -->
    <div class="til">{{detail.title}}</div>
    <div class="price">
      <p>
        <span style="color: #fa585a;font-size: .8rem;font-weight: 700;">
          <i class="price-tag" style="font-size:0.32rem;font-style:normal;font-weight:normal;">¥</i>{{detail.price}}
        </span>
      </p>
      <p>
        原价：<span style="font-size: .32rem; font-style: normal; text-decoration: line-through;">￥{{detail.originPrice}}</span>
      </p>
      <hr />
    </div>

    <!-- 详情介绍 -->
    <ul v-for="descContentList in descContentList" :key='descContentList.id' class="ul">
      <li>
        <img v-lazy="descContentList.image.url" >
      </li>
    </ul>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { findDetail } from '../../api/detail'

export default {
  name: 'Detail',
  data () {
    return {
      detail: {},
      images: [],
      descContentList: []
    }
  },
  methods: {
    back () {
      this.$router.back()
    }
  },
  created () {
    findDetail(this.$route.query.id)
      .then(data => {
        console.log('详情', data.detail.photo)
        this.images = data.detail.photo
        console.log('详情', data.detail)
        this.detail = data.detail
        this.descContentList = data.detail.descContentList
        console.log(this.descContentList)
      })
      .catch(err => {
        console.log('错误', err)
      })
  }
}
</script>

<style lang="scss" scoped>
  .header {
    position: relative;
  }
  .btn {
    position: absolute;
    opacity: 0.4;
    left: 0;
    top: 0;
    z-index: 100;
    width: 3em;
    height: 3em;
    border-radius: 50%;
  }
  .til {
    font-size: .4rem;
    line-height: 1.6;
    color: #43240c;
    margin: 0;
  }
  .price {
    width: 100%;
    height: 1.4rem;
  }
  .van-icon {
    font-size: 1.5em;
  }
  img {
      width: 100%;
      height: 100%;
    }
.ul {
  margin-top: 2em;
}
</style>
